<template>
  <div class="mod-user">
    <div style="margin-bottom: 12px;padding-left: 6px">
      <el-button icon="el-icon-refresh" type="primary" @click.stop="refresh">更新数据</el-button>
    </div>
    <avue-crud ref="crud" :page="page" :data="dataList" :option="tableOption" @on-load="getDataList">
      <template slot-scope="scope" slot="menu">
        <el-button type="primary" size="small" @click.stop="thirdPay(scope.row)">支付配置</el-button>
        <el-button type="primary" size="small" @click.stop="queryPay()">查询分账余额</el-button>
      </template>
    </avue-crud>
    <el-dialog :show-close="false" :visible.sync="dialogbalanceinfo" width="20%" top="25vh" :close-on-click-modal="false">
      <div class="list_item">
        <div class="title">分账余额：</div>
        <div class="content">
          {{ lsBalanceVo.balance }}元
        </div>
      </div>
      <div class="list_item">
        <div class="title">状态：</div>
        <div class="content">
          {{ lsBalanceVo.state == 1 ? "正常" : "异常" }}
        </div>
      </div>
      <div class="list_item">
        <div class="title">冻结金额：</div>
        <div class="content">
          {{ lsBalanceVo.frozen }}元
        </div>
      </div>
      <div class="list_item">
        <div class="title">允许的分账余额：</div>
        <div class="content">
          {{ lsBalanceVo.allowOutBalance }}元
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
        <el-button type="primary" size="medium" @click="balanceConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <third-pay-config ref="thirdPayConfig" @refreshDataList="getDataList"></third-pay-config>
  </div>
</template>

<script>
import { tableOption } from '@/crud/merchant/merchantList'
import thirdPayConfig from './merchant-thirdpay-config'
export default {
  components: {
    thirdPayConfig
  },
  data() {
    return {
      dataList: [],
      dialogbalanceinfo: false,
      dataListLoading: false,
      tableOption: tableOption,
      lsBalanceVo: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      }
    }
  },

  methods: {
    // 获取数据列表
    getDataList(page, params) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/v1/merchant/third/pay/list'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize
            },
            params
          )
        )
      }).then(({ data }) => {
        this.dataList = data.data.records
        this.page.total = data.data.total
        this.dataListLoading = false
      })
    },
    // 刷新
    refresh() {
      this.$confirm(`确定进行更新数据操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/third/pay/refresh'),
          method: 'POST',
          data: this.$http.adornData({})
        }).then(({ data }) => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList(this.page)
            }
          })
        })
      })
        .catch(() => { })
    },

    thirdPay(row) {
      this.$refs.thirdPayConfig.init(row)
    },

    // queryPay() {
    //   this.$http({
    //     url: this.$http.adornUrl('/v1/merchant/third/pay/query/ls/balance'),
    //     method: 'get',
    //     params: this.$http.adornParams({})
    //   }).then(({ data }) => {
    //     console.log(data.data)
    //   })
    // },
    balanceConfirm() {
      this.dialogbalanceinfo = false
    },

    queryPay() {
      this.dialogbalanceinfo = true
      this.$http({
        url: this.$http.adornUrl('/v1/merchant/third/pay/query/ls/balance'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {},
          )
        )
      }).then((res) => {
        this.lsBalanceVo = res.data.data
      }).catch(err => {
        console.log(err, "err")
      })
    },

    // 运营商账户列表
    merchant_User(merchantId) {
      this.$router.push({
        path: '/merchantUser',
        query: {
          id: merchantId
        }
      })
    }
  }
}
</script>

<style lang="scss">
.remain {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  input {
    width: 100px;
  }
}

.list_item {
  display: flex;
  align-items: center;
  height: 40px;

  .title {
    width: 120px;
    text-align: right;
  }

  .content {
    display: flex;
    align-items: center;

    .el-input {
      margin-right: 20px;
    }
  }

  .contentno {
    .tips {
      color: red;
      font-size: 12px;
      margin-top: 6px;
    }
  }
}

.sumary-list {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 15px;

  div {
    height: 30px;
    padding: 0px 12px;
    line-height: 30px;
    border: solid 1px #009FF1;
    border-radius: 15px;
    margin-right: 10px;
  }

  div:hover {
    color: white;
    background-color: #009FF1;
  }
}
</style>

